<template>
    <div class="goods-add-form">
        <div class="section">
            <h2 class="section-title">基础信息</h2>
            <el-form ref="ruleFormRef" style="max-width: 1200px;margin: 20px;" :model="sales_order" status-icon
                :rules="rules" label-width="auto" class="demo-ruleForm">
                <el-form-item label="销售订单名称" prop="sale_order_name">
                    <el-input v-model="sales_order.sale_order_name" placeholder="销售订单名称" />
                </el-form-item>
                <div style="display: flex; justify-content: space-between;">
                    <div style="width: 48%;">
                        <el-form-item label="销售订单编号" style="margin-bottom: 30px;">
                            <el-input v-model="sales_order.sale_order_code" placeholder="自动获取编号"disabled />
                        </el-form-item>
                        <el-form-item label="联系人" style="margin-bottom: 30px;">
                            <el-input v-model="sales_order.contacts_name" placeholder="联系人" disabled />
                        </el-form-item>
                        <el-form-item label="订单签订日期" prop="sale_order_sign_time" style="margin-bottom: 30px;">
                            <el-date-picker v-model="sales_order.sale_order_sign_time" type="date" width="460" :editable="false"
                                placeholder="请选择签订日期" :size="size" style="width: 460px;"
                                value-format="YYYY-MM-DDTHH:mm:ss.SSSZ" />
                        </el-form-item>
                        <el-form-item prop="sale_order_dept_id" label="销售部门" style="margin-bottom: 30px;">
                            <el-tree-select v-model="sales_order.sale_order_dept_id" :data="deptOptions"
                                :props="defaultProps" :check-strictly="true" placeholder="请选择销售部门" @change="getUser()">
                                <template #header>
                                    <el-input v-model="deptName" placeholder="搜索销售部门" style="padding: 5px"
                                        @input="getDeptDebounced" />
                                </template>
                            </el-tree-select>
                        </el-form-item>
                    </div>

                    <div style="width: 48%;">
                        <el-form-item label="客户名称" prop="customer_code" style="margin-bottom: 30px;">
                            <el-select v-model="sales_order.customer_code" placeholder="请选择客户" @change="customerEndit">
                                <template #header>
                                    <el-input v-model="customer_name" placeholder="搜索客户" style="padding: 5px"
                                        @input="getCustomerDebounced" />
                                </template>
                                <el-option v-for="item in customerOptons" :key="item.customer_code"
                                    :label="item.customer_name" :value="item.customer_code" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="联系方式" style="margin-bottom: 30px;">
                            <el-input v-model="sales_order.contacts_phone" placeholder="联系方式" disabled />
                        </el-form-item>
                        <el-form-item label="订单交付日期" style="margin-bottom: 30px;" prop="sale_order_deliver_time">
                            <el-date-picker v-model="sales_order.sale_order_deliver_time" type="date" :editable="false"
                                placeholder="请选择交付日期" :size="size" style="width: 460px;"
                                value-format="YYYY-MM-DDTHH:mm:ss.SSSZ" />
                        </el-form-item>
                        <!-- <el-form-item prop="sale_order_dept_id" label="销售部门" style="margin-bottom: 30px;"> -->
                        <el-form-item prop="sale_order_rep_id" label="销售负责人" style="margin-bottom: 30px;">
                            <el-select v-model="sales_order.sale_order_rep_id" placeholder="请选择销售负责人">
                                <template #header>
                                    <el-input v-model="userName" placeholder="搜索销售负责人" style="padding: 5px"
                                        @input="getUserDebounced" />
                                </template>
                                <el-option v-for="item in userOptions" :key="item.user_id" :label="item.user_name"
                                    :value="item.user_id" />
                            </el-select>
                        </el-form-item>
                    </div>
                </div>
            </el-form>
        </div>

        <div class="section">
            <h2 class="section-title">销售产品明细</h2>
            <div style="float: left;margin: 10px 0px;">
                <el-button type="primary" @click="productAdd">添加</el-button>
                <el-button @click="productDel">移除</el-button>
            </div>
            <el-table :data="selectedData" border style="width: 100%" :cell-style="{ textAlign: 'center' }"
                :header-cell-style="{
                    textAlign: 'center',
                    background: '#f5f7fa',
                    fontWeight: 'bold',
                    position: 'sticky',
                    top: 0
                }" ref="selectedTable" @selection-change="handleSelectedChange">
                <el-table-column type="selection" width="55" />
                <el-table-column prop="stock_name" label="产品名称" />
                <el-table-column prop="pro_code" label="产品编号" width="160" />
                <el-table-column prop="pro_brand" label="品牌" width="100" />
                <el-table-column prop="stock_model" label="规格型号" />
                <el-table-column prop="dict_code" label="单位" width="70">
                    <template #default="scope">
                        <span>{{ measureValue(scope.row.dict_code) }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="stock_numder" label="可用库存" />
                <el-table-column prop="address" label="销售数量">
                    <template #default="scope">
                        <el-input v-model="scope.row.sale_qty" style="width: 75px" :precision="2" :min="0"/>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="销售单价">
                    <template #default="scope">
                        <el-input v-model="scope.row.pro_sale_price" style="width: 75px" :precision="2" :min="0" maxlength="8"/>
                    </template>
                </el-table-column>
                <el-table-column prop="address" label="销售总金额">
                    <template #default="scope">
                        <span>{{ scope.row.pro_total_amount }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="pro_cost_price" label="成本金额" />
                <el-table-column prop="address" label="成本合计">
                    <template #default="scope">
                        <span>{{ scope.row.pro_total_cost }}</span>
                    </template>
                </el-table-column>
            </el-table>
            <div style="height: 40px; line-height: 40px;">
                <div style="display: inline-block; float: left;">合计</div>
                <div style="display: inline-block; float:right">销售总数量：{{ sale_total_qty }} &nbsp;&nbsp;&nbsp; 销售总金额：{{
                    Number(sale_total_price).toFixed(2) }} &nbsp;&nbsp;&nbsp;产品成本总额：{{
                        Number(cost_total_proce).toFixed(2) }}
                </div>
            </div>
        </div>

        <div class="button-group" style="position: absolute; bottom: 10px; right: 64px; display: flex; gap: 10px;">
            <el-button type="primary" @click="handleAdd">保存</el-button>
            <el-button @click="handleClose">关闭</el-button>
        </div>
    </div>

    <el-dialog v-model="dialogTableVisible" width="800" title="添加产品">
        <hr>
        <div style="margin: 10px 0px;">
            <div style="float: left;margin: 10px 0px;">
                <el-input v-model="productName" style="width: 240px;margin-right: 20px;" placeholder="请输入产品编号/名称" />
                <el-select v-model="dict_code" placeholder="请选择单位" style="width: 240px">
                    <el-option v-for="item in measureOptios" :key="item.dict_value" :label="item.dict_label"
                        :value="item.dict_value" />
                </el-select>
            </div>
            <div style="float: right;margin: 10px 0px;">
                <el-button @click="productReaslt">重置</el-button>
                <el-button type="primary" @click="productEedit">
                    查询
                </el-button>
            </div>
        </div>
        <el-table ref="multipleTableRef" :data="productData" :cell-style="{ textAlign: 'center' }" :header-cell-style="{
            textAlign: 'center',
            background: '#f5f7fa',
            fontWeight: 'bold',
            position: 'sticky',
            top: 0
        }" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" :selectable="isDisabled" />
            <el-table-column property="pro_code" label="产品编号" width="180" />
            <el-table-column property="stock_name" label="产品名称" width="200" />
            <el-table-column property="stock_model" label="规格型号" />
            <el-table-column property="dict_code" label="单位">
                <template #default="scope">
                    <span>{{ measureValue(scope.row.dict_code) }}</span>
                </template>
            </el-table-column>
            <el-table-column property="pro_cost_price" label="入库单价" />
            <el-table-column property="stock_numder" label="可用库存" />
        </el-table>
        <br>
        <div style="text-align: center;display: flex; justify-content: center;">
            <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 20, 50]"
                :small="false" :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageCount"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" size="small" />
        </div>
        <hr>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogTableVisible = false">取消</el-button>
                <el-button type="primary" @click="handleConfirmSelection">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script>
import { ref, reactive, onMounted, inject, watch, toRaw } from 'vue'
import dayjs from 'dayjs'
import axios from 'axios'
import { useRouter } from 'vue-router';
import { ElMessage,ElLoading } from 'element-plus';
import { debounce } from 'lodash';
export default {
    setup() {
        const sales_order = reactive({
            sale_order_name: "",//销售订单名称
            sale_order_code: "",//销售订单编号
            customer_name: "",//客户名称
            customer_code: "",//客户编号
            contacts_name: "",//联系人名称
            contacts_phone: "",//联系人电话/联系方式
            sale_order_sign_time: "",//订单签订日期
            sale_order_deliver_time: "",//订单交付日期
            sale_order_rep_id: "",//销售订单负责人
            sale_order_dept_id: "",//销售部门
            sale_order_status: 0,//出库状态
            del_flag: '0',//删除状态
            create_by: localStorage.getItem('userLName'),//创建人
            create_time: dayjs().format('YYYY-MM-DDTHH:mm:ss.SSSZ'),//创建时间
        })
        const ruleFormRef = ref(null)
        const rules = reactive({
            sale_order_name: [
                { required: true, message: "销售订单名称不能为空", trigger: ["blur","change"] },
            ], customer_code: [
                { required: true, message: "客户名称不能为空", trigger: ["blur","change"] },
            ], sale_order_sign_time: [
                { required: true, message: "订单签单日期不能为空", trigger: ["blur","change"] },
            ], sale_order_deliver_time: [
                { required: true, message: "订单交付日期不能为空", trigger: ["blur","change"] },
            ], sale_order_rep_id: [
                { required: true, message: "销售负责人不能为空", trigger: ["blur","change"] },
            ], sale_order_dept_id: [
                { required: true, message: "销售部门不能为空", trigger: ["blur","change"] },
            ]
        });
        const userOptions = ref([])
        const deptOptions = ref([])
        const customerOptons = ref([])
        const customer_name = ref("")
        const dialogTableVisible = ref(false)
        const productData = ref([])
        const currentPage = ref(1)
        const pageSize = ref(5)
        const pageCount = ref(0)
        const productName = ref("")
        const dict_code = ref("0")
        const measureOptios = ref([])
        const multipleTableRef = ref(null); // 表格引用
        const selectedProducts = ref([]); // 存储选中的产品
        const selectedTable = ref(null);//表格引用
        const selectedRows = ref([]);//存储选中的数据
        const selectedData = ref([]); // 最终确认选择的数据
        const attributeOptios = ref([])
        const sale_total_qty = ref(0)//记录销售总数
        const sale_total_price = ref(0)//记录销售总额
        const cost_total_proce = ref(0)//记录产品成本总额
        const router = useRouter()
        const deptName = ref("")
        const userName = ref("")

        onMounted(() => {
            getUser()
            getDept()
            getMeasure()
            getAttribute()
            getCustomer()
            productFill()
            productCount()
        })

        watch(selectedData, (newVal) => {

            //每次计算时清空累加
            sale_total_qty.value = 0
            sale_total_price.value = 0
            cost_total_proce.value = 0
            newVal.forEach(row => {
                if (isNaN(Number(row.sale_qty))) {
                    ElMessage.warning('销售数量必须是数字');
                    row.sale_qty = 0;
                }

                // 验证销售单价
                if (isNaN(Number(row.pro_sale_price))) {
                    ElMessage.warning('销售单价必须是数字');
                    row.pro_sale_price = 0;
                }

                if (row.sale_qty > row.stock_numder) {
                    ElMessage.warning('销售数量不能大于当前库存');
                    row.sale_qty = row.stock_numder
                }
                row.pro_total_amount = Number((row.sale_qty || 0) * (row.pro_sale_price || 0)).toFixed(2);
                row.pro_total_cost = Number((row.sale_qty || 0) * (row.pro_cost_price || 0)).toFixed(2);

                sale_total_qty.value += Number(row.sale_qty)
                sale_total_price.value += Number(row.pro_total_amount)
                cost_total_proce.value += Number(row.pro_total_cost)
            });
        }, { deep: true });

        //防抖函数0.5秒后进行查询
        const getDeptDebounced = debounce(getDept, 500);
        function getDept() {
            axios.get("http://localhost:5181/api/Dept/Get_Dept_Trees", {
                params: {
                    name: deptName.value
                },
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                deptOptions.value = convertToTreeOptions(result.data)
            }).catch((err) => {
                console.info(err)
            });
        }

        const getUserDebounced = debounce(getUser, 500);
        function getUser() {
            axios.get("http://localhost:5181/api/User/GetUsers", {
                params: {
                    dept: sales_order.sale_order_dept_id,
                    name: userName.value
                },
                headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                userOptions.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        //防抖函数0.5秒后进行查询
        const getCustomerDebounced = debounce(getCustomer, 500);

        //查询客户信息
        function getCustomer() {
            axios.get("http://localhost:5181/api/Sinv_Customer/Sinv_CustomerByName", {
                params: {
                    name: customer_name.value
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                customerOptons.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        //把二维数据转换为结构数据
        const convertToTreeOptions = (items) => {
            return items.map(item => ({
                value: item.dept_id,
                label: item.dept_name,
                children: item.children && item.children.length > 0
                    ? convertToTreeOptions(item.children)
                    : []
            }))
        }

        //选择客户时赋值联系人名称和联系人电话
        function customerEndit() {
            const customer = customerOptons.value.find((cus) => cus.customer_code == sales_order.customer_code)
            sales_order.customer_name = customer.customer_name
            sales_order.contacts_name = customer.contacts_name
            sales_order.contacts_phone = customer.contacts_phone
        }

        function productAdd() {
            dialogTableVisible.value = true
        }

        //移除选中的table控件数据
        const productDel = () => {
            if (selectedRows.value.length === 0) {
                ElMessage.warning('请先选择要移除的数据');
                return;
            }

            const selectedCodes = selectedRows.value.map(item => item.stock_id);
            selectedData.value = selectedData.value.filter(
                item => !selectedCodes.includes(item.stock_id)
            );

            if (selectedTable.value) {
                selectedTable.value.clearSelection();
            }

            selectedRows.value = [];
        };

        //分页查询产品库存信息
        function productFill() {
            axios.get("http://localhost:5181/api/Db_warehouse/GetInv_Stock", {
                params: {
                    productName: productName.value,
                    dict_code: dict_code.value,
                    currentPage: currentPage.value,
                    pageSize: pageSize.value
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                console.info(result.data)
                productData.value = result.data.map(item => ({
                    ...item,
                    stock_numder: item.stock_numder + item.stock_planned_store_qty - item.stock_planned_outbound_qty
                }))
            }).catch((err) => {
                console.info(err)
            });
        }

        //查询产品库存总数
        function productCount() {
            axios.get("http://localhost:5181/api/Db_warehouse/Inv_StockCount", {
                params: {
                    productName: productName.value,
                    dict_code: dict_code.value
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                pageCount.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        function handleSizeChange(val) {
            pageSize.value = val;
            productFill();
        }

        function handleCurrentChange(val) {
            currentPage.value = val;
            productFill();
        }

        //查询计量单位
        function getMeasure() {
            axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
                params: {
                    dict_type: "db_measure"
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                measureOptios.value = result.data
                measureOptios.value = [{
                    dict_value: "0", dict_label: "请选择单位"
                }, ...result.data]
            }).catch((err) => {
                console.info(err)
            });
        }

        //根据计量单位id返回计量单位名称
        function measureValue(row) {
            if (!row) return "无";
            const parentDept = measureOptios.value.find((sex) => sex.dict_value == row);
            return parentDept ? parentDept.dict_label : "无";
        }

        //查询产品属性
        function getAttribute() {
            axios.get("http://localhost:5181/api/Dict/Get_Dict_Datas", {
                params: {
                    dict_type: "db_pro_attribute"
                }, headers: {
                    authorization: `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                attributeOptios.value = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        //根据产品属性id返回产品属性名称
        function attributeValue(row) {
            if (!row) return "无";
            const parentDept = attributeOptios.value.find((sex) => sex.dict_value == row);
            return parentDept ? parentDept.dict_label : "无";
        }

        //根据选择条件查询产品库存信息
        function productEedit() {
            productFill()
            productCount()
        }

        //重置条件查询
        function productReaslt() {
            productName.value = ""
            dict_code.value = "0"
            productFill()
            productCount()
        }

        // 表格选择变化时的处理函数
        const handleSelectionChange = (val) => {
            selectedProducts.value = val;
        };

        //点击确定存储选择的产品数据
        const handleConfirmSelection = () => {
            selectedData.value = [...selectedData.value, ...selectedProducts.value.map(item => ({
                ...item,
                sale_qty: Number(0),//初始化销售数量为0
                pro_total_amount: Number(0).toFixed(2),//销售总金额
                pro_total_cost: Number(0).toFixed(2),//成本合计
                pro_sale_price: Number(item.pro_sale_price || 0).toFixed(2), // 格式化销售单价
                pro_cost_price: Number(item.pro_cost_price || 0).toFixed(2), // 格式化成本单价
            }))]//保存选择的产品数据
            dialogTableVisible.value = false
            multipleTableRef.value.clearSelection()//清空当前选择
        }

        //表格选择变化时处理数据
        const handleSelectedChange = (val) => {
            selectedRows.value = val;
        };

        //判断以添加过的产品数据不能再次添加
        const isDisabled = (row) => {
            return !selectedData.value.some(item => item.stock_id === row.stock_id);
        };

        //退出页面并删除当前页面的标签页
        const closeTab = inject('closeTab'); // 注入关闭方法
        function handleClose() {
            const targetPath = "/main/Sinv/SalesOrder";

            if (closeTab) {
                closeTab(); // 调用父组件提供的关闭方法
            }

            // 添加目标标签页（如果不存在）
            const tabs = inject('editableTabs');
            if (tabs && !tabs.value.some(tab => tab.path === targetPath)) {
                tabs.value.push({
                    title: "销售订单",
                    name: targetPath,
                    path: targetPath
                });
            }

            // 跳转并激活目标标签页
            const activeTab = inject('editableTabsValue');
            if (activeTab) {
                activeTab.value = targetPath;
            }

            router.push(targetPath);
        }

        //点击保存按钮
        function handleAdd() {
            ruleFormRef.value.validate(async (valid, fields) => {
                if (valid) {
                    if (selectedData.value.length > 0) {
                        if (sales_order.sale_order_code == "") {
                            obtainCode().then(() => {
                                saleAdd()
                            }).catch((err) => {
                                console.info(err)
                            });
                        } else {
                            saleAdd()
                        }
                    } else {
                        ElMessage.warning('请选择要添加的产品数据');
                        return;
                    }
                }
            })
        }

        //获取编号
        function obtainCode() {
            return axios.get("http://localhost:5181/api/DJBH/DJBH", {
                params: {
                    en_code: 8
                }
            }).then((result) => {
                sales_order.sale_order_code = result.data
            }).catch((err) => {
                console.info(err)
            });
        }

        //添加销售订单及其销售详情
        function saleAdd() {
            const loadingInstance = ElLoading.service({
                lock: true,
                text: '正在添加中...',
                background: 'rgba(0, 0, 0, 0.7)',
            });
            const sinv_Sale_Order_DetailsAddDtos1 = selectedData.value.map(item => ({
                sale_order_code: sales_order.sale_order_code,
                pro_name: item.stock_name,
                pro_code: item.pro_code,
                pro_brand: item.pro_brand,
                pro_model: item.stock_model,
                measure_id: item.dict_code,
                pro_sale_qty: item.sale_qty,
                pro_sale_price: item.pro_sale_price,
                pro_total_amount: item.pro_total_amount,
                pro_cost_price: item.pro_cost_price,
                pro_total_cost: item.pro_total_cost,
                sale_order_total_qty: sale_total_qty.value,
                sale_order_total_price: sale_total_price.value,
                sale_order_total_proce: cost_total_proce.value
            }))
            const saleOrderWithDetails = {
                sinv_Sale_OrderDto: {
                    sale_order_name: sales_order.sale_order_name,
                    sale_order_code: sales_order.sale_order_code,
                    customer_name: sales_order.customer_name,
                    customer_code: sales_order.customer_code,
                    contacts_name: sales_order.contacts_name,
                    contacts_phone: sales_order.contacts_phone,
                    sale_order_sign_time: sales_order.sale_order_sign_time,
                    sale_order_deliver_time: sales_order.sale_order_deliver_time,
                    sale_order_rep_id: sales_order.sale_order_rep_id,
                    sale_order_dept_id: sales_order.sale_order_dept_id,
                    sale_order_status: sales_order.sale_order_status,
                    sale_order_audit_status: '0',
                    del_flag: sales_order.del_flag,
                    create_by: sales_order.create_by,
                    create_time: sales_order.create_time,
                    sale_order_total_qty: sale_total_qty.value,
                    sale_order_total_price: sale_total_price.value,
                    sale_order_total_proce: cost_total_proce.value
                },
                sinv_Sale_Order_DetailsAddDtos: [...sinv_Sale_Order_DetailsAddDtos1] // 创建详情数组的副本
            };
            axios.post("http://localhost:5181/api/Sinv_Sale_Order/Sinv_Sale_OrderAdd", saleOrderWithDetails, {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${localStorage.getItem('token')}`
                }
            }).then((result) => {
                if (result.data > 0) {
                    ElMessage({
                        type: 'success',
                        message: '销售订单添加成功！'
                    });
                    handleClose()
                } else {
                    ElMessage({
                        type: 'danger',
                        message: '销售订单添加失败！'
                    });
                }
            }).catch((err) => {
                console.info(err)
            }).finally(() => {
                loadingInstance.close();
            })
        }

        return {
            sales_order, userOptions, deptOptions, customerOptons, customer_name, getCustomerDebounced, customerEndit, dialogTableVisible,
            productAdd, productData, pageCount, pageSize, currentPage, productName, dict_code, handleSizeChange, handleCurrentChange, measureOptios,
            productEedit, productReaslt, selectedProducts, selectedData, multipleTableRef, handleSelectionChange, handleConfirmSelection, measureValue,
            attributeValue, attributeOptios, productDel, handleSelectedChange, sale_total_qty, sale_total_price, cost_total_proce, isDisabled, handleClose,
            handleAdd, ruleFormRef, rules, getUser, getDeptDebounced, deptName, userName, getUserDebounced
        }
    }
}
</script>

<style scoped>
.goods-add-form {
    padding: 20px;
    background-color: #fff;
}

.section {
    margin-bottom: 30px;
    border: 1px solid #ebeef5;
    border-radius: 4px;
    padding: 20px;
    /* 添加阴影效果 */
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 15px;
}

.button-group {
    float: right;
    display: flex;
    position: flex;
    text-align: right;
    margin-top: 20px;
    height: 7%;
    align-items: center;
    width: 80.1%;
    background-color: #ffffff;
    justify-content: flex-end;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    padding-right: 20px;
}
</style>